<template>

  <div class="app-container">

      <h2 style="text-align: center;">发布新课程</h2>

      <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息"/>
        <el-step title="创建课程大纲"/>
        <el-step title="提交审核"/>
      </el-steps>
      <el-form label-width="120px">

      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <!-- 所属分类：级联下拉列表 -->
      <!-- 一级分类 -->
      <el-form-item label="课程类别">
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="一级分类"  @change="subjectLevelOneChanged">
          <el-option
            v-for="subject in subjectNestedList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
         </el-select>
         <!-- 二级分类 -->
         <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
           <el-option
             v-for="subject in subSubjectList"
             :key="subject.value"
             :label="subject.title"
             :value="subject.id"/>
         </el-select>

      </el-form-item>


      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select
          v-model="courseInfo.teacherId"
          placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
      </el-form-item>

      <!-- 课程简介-->
      <el-form-item label="课程简介">

          <tinymce :height="300" v-model="courseInfo.description"/>
      </el-form-item>

      <!-- 课程封面-->
      <el-form-item label="课程封面">

        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="'http://localhost:8200/eduoss/fileoss/uploadCoursePicture'"
          class="avatar-uploader">
          <img :src="courseInfo.cover">
        </el-upload>

      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
      </el-form>
  </div>
</template>
<script>
import course from'@/api/course/course'
import Tinymce from '@/components/Tinymce'
export default {
  components: { Tinymce },

  data() {
    return {
      saveBtnDisabled: false ,// 保存按钮是否禁用
      courseInfo:{
          title: '',
          subjectParentId:'',
          subjectId: '',
          teacherId: '',
          lessonNum: 0,
          description: '',
          cover:'https://education-zyf.oss-cn-beijing.aliyuncs.com/coursePicture/2021/09/10/4d51193c-0ce9-4e7e-a3d0-75125a49eae4test.jpg'
      },
      teacherList:[],
      subjectNestedList:[],
      subSubjectList:[]
    }
  },

  created() {
    this.getAllTeacher()
    this.getAllFirstCourse()
    this.getCourseByCourseId()
  },

  methods: {
    //添加操作
    saveOrUpdate() {
      //判断是添加操作还是修改操作
      if(this.$route.params && this.$route.params.id){
       //添加操作
       const id=this.$route.params.id
       course.updateCourseVo(this.courseInfo)
       .then(response => {
         //提示信息
          this.$message({
           type: 'success',
           message: '添加成功!'
         });
         //跳转到第二步
         this.$router.push({ path: '/course/chapter/'+id})
       })
      }else{
        //添加操作
      course.addCourseVo(this.courseInfo)
      .then(response => {
        //提示信息
         this.$message({
          type: 'success',
          message: '添加成功!'
        });
        //跳转到第二步
        this.$router.push({ path: '/course/chapter/'+response.data.courseId})
      })
      }
    },
    //获取讲师列表
    getAllTeacher(){
      course.getAllTeacher()
      .then(response =>{
        this.teacherList=response.data.list
      })
    },
    //获取全部的一级课程目录
    getAllFirstCourse(){
      course.getAllFirstCourse()
      .then(response =>{
        this.subjectNestedList=response.data.list
      })
    },
    //根据parent_id获取二级课程目录
    getSecondCourseByParentId(){
      course.getSecondCourseByParentId(this.courseInfo.subjectParentId)
      .then(response =>{
        this.subSubjectList=response.data.list
      })
    },
    //点击一个一级分类，则改变subjectParentId，用这个id查询二级分类
    //并且改变一级分类，二级分类的id清空
    subjectLevelOneChanged(value){
      this.getSecondCourseByParentId()
      this.courseInfo.subjectId=''
    },
    //上传课程图片
    //上传成功调用
    handleAvatarSuccess(res, file) {
      this.courseInfo.cover = res.data.url
    },
    //上传之前调用
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
	//根据课程id查询课程数据，用于到达第二步时点击上一把进行数据回显
	getCourseByCourseId(){
		if(this.$route.params && this.$route.params.id){
		  const id=this.$route.params.id
		  //根据id查询讲师
      course.getCourseByCourseId(id)
      .then(response =>{
        this.courseInfo=response.data.course
        if(!response.data.course.cover){
          this.courseInfo.cover='https://education-zyf.oss-cn-beijing.aliyuncs.com/coursePicture/2021/09/10/4d51193c-0ce9-4e7e-a3d0-75125a49eae4test.jpg'
        }
        //根据subjectParentId显示二级课程目录
        this.getSecondCourseByParentId()
      })
		}
	}

  }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>
